<template>
	<view class="user-order-list">
		<!-- 用户  订单列表 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">商城订单</text>
			</view>
		</u-navbar>
		<view class="authentication-container w-750 b-box  bg-fa po-re">
			<view class="w-100 bg-ff b-box">
				<view class="d-flex flex-r ali-i-c just-c b-box bg-ff" style="height: 92rpx;width: 600rpx;">
					<u-tabs
						:list="TabList"
						lineColor="#FFD300"
						@click="tabsClick"
						:inactiveStyle="{
							color: '#666666',
							fontSize: '32rpx',
							fontWeight: '400',
							fontFamily: 'PingFang SC'
						}"
						:activeStyle="{
							color: '#262626',
							fontSize: '32rpx',
							fontWeight: '500',
							fontFamily: 'PingFang SC'
						}"
						lineWidth="36rpx"
						:lineBottom="'12rpx'"
						:itemStyle="{ height: '88rpx', backgroundColor: 'rgba(255,255,255,0)' }"
						:current="TabCurrent"
						lineHeight="6rpx"
					></u-tabs>
				</view>
			</view>
			<!-- list -->
			<!-- swiper tabs标签 -->
			<view style="margin-top:20rpx ;">
				<view class="" v-if="dataList.length > 0">
					<user-order-card
						@Contact="Contact"
						@CancelOrder="CancelOrder"
						@PayOrder="PayOrder"
						@ConfirmReceipt="ConfirmReceipt"
						v-for="(item, index) of dataList"
						:key="item.id"
						:staffList="item"
					/>
				</view>
				<!-- 空状态 -->
				<view
					class=" d-flex flex-c ali-i-c just-c"
					:style="{ height: parseFloat(listHeight) / 2 + 'px' }"
					v-else
				>
					<text
						v-if="dataList"
						style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;"
					>
						数据为空
					</text>
				</view>
			</view>
		</view>

		<!-- popup -->
		<u-popup
			:show="show"
			mode="bottom"
			overlayOpacity="0.6"
			:round="25"
			@close="close"
			@open="open"
		>
			<view class=" d-flex flex-c ali-i-s just-s b-box" style="padding: 40rpx 0;">
				<!-- title -->
				<view class="d-flex flex-r ali-i-c just-c w-100 b-box po-re">
					<text class="fw-500 pf-sc fw-500" style="font-size: 32rpx;">选择支付方式</text>
					<text
						class="fw-500 pf-sc fw-500 po-ab"
						style="font-size: 32rpx; right:42rpx"
						@click="close"
					>
						×
					</text>
				</view>
				<!--  -->
				<view
					class=" d-flex flex-r ali-i-c just-sw w-100 b-box"
					@click="Select = 2"
					style="height: 120rpx;border-bottom: 2rpx solid #dedede;padding: 0 36rpx 0 32rpx;"
				>
					<view class="d-flex flex-r ali-i-c just-s">
						<image
							:src="require('../static/hy2.png')"
							style="width: 56rpx;height: 56rpx;margin-right: 16rpx;"
						></image>
						<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">余额支付</text>
						<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">（￥{{ user.money }}）</text>
					</view>
					<view v-if="Select === 2">
						<image :src="require('../static/xz.png')" style="width: 36rpx;height: 36rpx;"></image>
					</view>
				</view>
				<view
					class=" d-flex flex-r ali-i-c just-sw w-100 b-box"
					@click="Select = 1"
					style="height: 120rpx;border-bottom: 2rpx solid #dedede;margin-bottom: 60rpx;padding: 0 36rpx 0 32rpx;"
				>
					<view class="d-flex flex-r ali-i-c just-s">
						<image
							:src="require('../static/hy3.png')"
							style="width: 56rpx;height: 56rpx;margin-right: 16rpx;"
						></image>
						<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">微信支付</text>
						<!-- <text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">（2次可用）</text> -->
					</view>
					<view v-if="Select === 1">
						<image :src="require('../static/xz.png')" style="width: 36rpx;height: 36rpx;"></image>
					</view>
				</view>
				<!-- btn -->
				<view class="d-flex flex-r ali-i-c just-c w-100 b-box" style="margin-bottom: 12rpx;">
					<u-button
						@click="SubMitOrder"
						:customStyle="{
							height: '88rpx',
							width: '670rpx',
							font: '500 32rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="确定"
					></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { orderlist, dfkpayorder, doorder } from '@/common/api.js';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import Ubutton from '../components/uview-ui/components/u-button/u-button';
import uTabs from '../components/uview-ui/components/u-tabs/u-tabs';
import UserOrderCard from '../components/user-order-card/user-order-card';
import uPopup from '../components/uview-ui/components/u-popup/u-popup';
export default {
	components: {
		'user-order-card': UserOrderCard,
		'u-navbar': Unavbar,
		'u-button': Ubutton,
		'u-tabs': uTabs,
		'u-popup': uPopup
	},
	data() {
		return {
			shopId: '',
			Select: '',
			user: uni.getStorageSync('userInfo'),
			show: false,
			containerHeight: '',
			listHeight: '',
			TabList: [
				{
					id: 0,
					name: '全部订单'
				},
				{
					id: 1,
					name: '待发货'
				},
				{
					id: 2,
					name: '待收货'
				},
				{
					id: 3,
					name: '已完成'
				}
			],
			TabCurrent: 0, //当前选中标签的索引
			dataList: [],
			page: 1
		};
	},

	onPullDownRefresh() {
		this.page = 1;
		this.tabsClick();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	onReachBottom() {
		console.log('到底了');
		this.page = this.page + 1;
		this.tabsClick();
	},
	methods: {
		ConfirmReceipt(data) {
			//3:已完成订单
			uni.showModal({
				title: '提示',
				content: '是否确认收货',
				success: res => {
					if (res.confirm) {
						let params = {
							token: uni.getStorageSync('usertoken'),
							type: 3,
							id: data.id
						};
						doorder(params).then(res => {
							if (res.data.code === 1) {
								uni.showToast({
									title: '收货成功'
								});
								this.tabsClick();
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		PayOrder(data) {
			this.shopId = data.id;
			this.open();
		},

		SubMitOrder() {
			console.log(this.shopId, this.Select);
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: this.shopId,
				paytype: this.Select
			};

			if (this.Select != 1 && this.Select != 2) {
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none'
				});
				return;
			}

			if (this.Select == 1) {
				let _this = this;
				dfkpayorder(params).then(res => {
					console.log(res.data.data, '带娃带娃');
					var paydata = res.data.data;
					uni.requestPayment({
						provider: 'wxpay',
						// "orderInfo": {  },
						// "appid":paydata.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						nonceStr: paydata.nonceStr, // 随机字符串
						package: paydata.package, // 固定值
						partnerid: '1629006880', // 微信支付商户号
						prepayid: params.id, // 统一下单订单号
						timeStamp: paydata.timeStamp, // 时间戳（单位：秒）
						paySign: paydata.paySign, // 签名，这里用的 MD5/RSA 签名
						signType: paydata.signType, // 签名算法
						success(res) {
							if (res.errMsg == 'requestPayment:ok') {
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								});
								_this.show = false;
								_this.tabsClick()
							}
						},
						fail(e) {
							console.log(e);
							uni.showToast({
								title: e,
								icon: 'none'
							});
						}
					});
				});
			} else if (this.Select == 2) {
				dfkpayorder(params).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
						this.show = false;
						this.tabsClick()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			} else {
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none'
				});
			}
		},

		CancelOrder(data) {
			//取消订单
			let params = {
				token: uni.getStorageSync('usertoken'),
				type: 1,
				id: data.id
			};
			doorder(params).then(res => {
				if (res.data.code === 1) {
					uni.showToast({
						title: '订单取消成功'
					});
					this.tabsClick();
				} else {
					uni.showToast({
						title: '该订单不能取消',
						icon: 'none'
					});
				}
			});
		},
		Contact(data) {
			//联系客服
		},
		ClearRefre_() {
			for (let index = 0; index < 3; index++) {
				this.$set(this, `refresher_triggered${index}_`, false);
			}
		},

		tabsClick(index) {
			if (index) {
				this.page = 1;
				this.dataList = [];
				this.TabCurrent = index.id || index.index;
				this.ClearRefre_();
			}
			let params = {
				token: uni.getStorageSync('usertoken'),
				shopstatus: this.TabCurrent,
				page: this.page
			};
			orderlist(params).then(res => {
				var data = res.data;
				if (data.data.length > 0) {
					if (this.page == 1) {
						this.dataList = data.data;
					} else {
						this.dataList = this.dataList.concat(...data.data);
					}
				} else {
					if (this.page > 1) {
						uni.showToast({
							icon: 'none',
							title: '暂无更多内容'
						});
						this.page = this.page - 1;
					}
				}
			});
		}
	},
	onShow() {},
	onLoad() {
		this.containerHeight = _containerHeight();
		this.listHeight = _addUnit(parseInt(this.containerHeight) - _rpxTpx('118rpx'), 'px');
		this.tabsClick();
	}
};
</script>

<style lang="scss">
.user-order-list {
}
</style>
